<template>
  <div id="screen" :style="{'width':`${style.width}px`,'height':`${style.height}px`,'transform':`${style.transform}`}">
    <div class="app-container" style="padding:0;width:100%;height:100%">
      <div class="bigScreen-div">
        <div class="big-title">
          <dv-decoration-3 style="width:250px;height:30px;" />
          <div style="padding:0 40px;color:#eaf9ff">
            塑盟集团数据看盘
          </div>
          <dv-decoration-3 style="width:250px;height:30px;" />
        </div>
        <div class="big-info">
          <div style="height:70%">
            <el-row :gutter="16" style="height:100%">
              <el-col :span="8" style="height:100%">
                <div style="height:calc(25% - 8px)">
                  <dv-border-box-12 :reverse="true">
                    <div class="num-info" v-if="topData">
                      <div class="num-div" style="height:50%;margin-top:-20px">
                        <div class="num-item">
                          <div class="num">
                            <countTo :startVal='0' :endVal='topData.dayGoodsNum' :duration='3000'></countTo>
                          </div>
                          <div class="text">今日成交数量</div>
                        </div>
                        <div class="num-item">
                          <div class="num">
                            <countTo :startVal='0' :endVal='topData.dayNum' :duration='3000'></countTo>
                          </div>
                          <div class="text">今日成交金额</div>
                        </div>
                        <div class="num-item">
                          <div class="num">
                            <countTo :startVal='0' :endVal='topData.orderDayRatio' :duration='3000'></countTo>%
                          </div>
                          <div class="text">环比增长</div>
                        </div>
                      </div>
                      <div class="num-div" style="height:50%">
                        <div class="num-item" >
                          <div class="num">
                            <countTo :startVal='0' :endVal='topData.monthGoodsNum' :duration='3000'></countTo>
                          </div>
                          <div class="text">本月成交数量</div>
                        </div>
                        <div class="num-item" >
                          <div class="num">
                            <countTo :startVal='0' :endVal='topData.monthNum' :duration='3000'></countTo>
                          </div>
                          <div class="text">本月成交金额</div>
                        </div>
                        <div class="num-item">
                          <div class="num">
                            <countTo :startVal='0' :endVal='topData.orderMonthRatio' :duration='3000'></countTo>%
                          </div>
                          <div class="text">环比增长</div>
                        </div>
                      </div>
                    </div>
                  </dv-border-box-12>
                </div>
                <div style="height:75%;margin-top:8px;background-color: rgba(6,30,93,.5); padding:0 20px">
                  <div style="height:40%;">
                    <div class="title-div">
                     <span style="cursor: pointer;"
                           :style="{color:propKey == 'day' ? 'rgba(255,255,255,1)' : 'rgba(255,255,255,0.5)'}"
                           @click="changePopKey('day')">日销品类占比</span> |
                      <span style="cursor: pointer;"
                            :style="{color:propKey == 'month' ? 'rgba(255,255,255,1)' : 'rgba(255,255,255,0.5)'}"
                            @click="changePopKey('month')">
                       月销品类占比
                     </span>
                    </div>
                    <div class="hxtb-div">
                      <div class="charts-div" v-if="config3.data.length > 0">
                        <dv-active-ring-chart :config="config3" style="width:180px;height:180px" v-if="config3.data.length > 0"/>
                      </div>
                      <div class="table-div">
                        <table class="table" cellpadding="0" cellspacing="0" v-if="leftData[propKey]">
                          <tr>
                            <th>品名</th>
                            <th>销售</th>
                            <th>占比</th>
                          </tr>
                          <tr>
                            <td align="center">PA6</td>
                            <td align="center">{{ leftData[propKey]['PA6']['num'] }}</td>
                            <td align="center">{{ leftData[propKey]['PA6']['ratio'] }}%</td>
                          </tr>
                          <tr>
                            <td align="center">PC</td>
                            <td align="center">{{ leftData[propKey]['PC']['num'] }}</td>
                            <td align="center">{{ leftData[propKey]['PC']['ratio'] }}%</td>
                          </tr>
                          <tr>
                            <td align="center">ABS</td>
                            <td align="center">{{ leftData[propKey]['ABS']['num'] }}</td>
                            <td align="center">{{ leftData[propKey]['ABS']['ratio'] }}%</td>
                          </tr>
                          <tr>
                            <td align="center" style="border-bottom:0">其它</td>
                            <td align="center" style="border-bottom:0">{{ leftData[propKey]['other']['num'] }}</td>
                            <td align="center" style="border-bottom:0">{{ leftData[propKey]['other']['ratio'] }}%</td>
                          </tr>
                        </table>
                      </div>
                    </div>
                  </div>
                  <dv-decoration-10 style="width:100%;height:5px;" />
                  <div style="height:60%">
                    <div class="title-div">
                     <span style="cursor: pointer"
                           :style="{color:listKey == 'dayList' ? 'rgba(255,255,255,1)' : 'rgba(255,255,255,0.5)'}"
                           @click="changeListKey('dayList')">日销商品排行</span>
                      |
                      <span style="cursor: pointer;color:rgba(255,255,255,0.5)"
                            :style="{color:listKey == 'monthList' ? 'rgba(255,255,255,1)' : 'rgba(255,255,255,0.5)'}"
                            @click="changeListKey('monthList')">月销商品排行</span>
                    </div>
                    <dv-scroll-ranking-board :config="config2" style="width:100%;height:calc(100% - 50px)" v-if="config2.data.length > 0"/>
                    <div style="color:#ccc;text-align: center;padding-top:80px;" v-else>- 暂无数据 -</div>
                  </div>
                </div>
              </el-col>
              <el-col :span="8" style="height:100%">
                <div style="height:calc(14% - 8px)">
                  <div style="height:100%;background-color: rgba(6,30,93,.5); padding:0">
                    <dv-border-box-8>
                      <div class="num-info" style="width:100%" v-if="topData">
                        <div class="num-div" style="width:100%">
                          <div class="num-item" style="width:50%">
                            <div class="num" style="color:#F5D94E;font-size:34px">
                              <countTo :startVal='0' :endVal='topData.allNum' :duration='3000'></countTo>
                            </div>
                            <div class="text" style="font-size:18px">成交总额</div>
                          </div>
                          <div class="num-item" style="width:50%">
                            <div class="num" style="color:#F5D94E;font-size:34px">
                              <countTo :startVal='0' :endVal='topData.allGoodsNum' :duration='3000'></countTo>
                            </div>
                            <div class="text" style="font-size:18px">成交总量</div>
                          </div>
                        </div>
                      </div>
                    </dv-border-box-8>
                  </div>
                </div>
                <div style="height:56%;margin:8px 0;width:100%">
                  <div class="title-div">货运轨迹</div>
                  <div id="map" style="width:110%;height:120%;position: relative;z-index: 0;margin-left:-4%;margin-top:-5%" v-if="downData"></div>

                </div>
                <div style="height:calc(30% - 8px)">
                  <dv-border-box-12 :reverse="true">
                    <div class="num-info" style="background-color: rgba(6,30,93,.8);">

                      <div class="num-div" v-if="topData" style="margin-top:-10px;">
                        <div class="num-item" style="width:25%">
                          <div class="num">
                            {{topData.inqTodayNum}}
                          </div>
                          <div class="text">今日询盘数</div>
                        </div>
                        <div class="num-item" style="width:25%">
                          <div class="num">
                            {{topData.todayPriceNum}}
                          </div>
                          <div class="text">今日报价数</div>
                        </div>
                        <div class="num-item" style="width:25%">
                          <div class="num">
                            {{topData.todaySucNum}}
                          </div>
                          <div class="text">今日成交数</div>
                        </div>
                        <div class="num-item" style="width:25%">
                          <div class="num">
                            {{topData.inqDayRatio}}%
                          </div>
                          <div class="text">成交比</div>
                        </div>
                      </div>

                      <div class="num-div" v-if="topData">
                        <div class="num-item" style="width:25%">
                          <div class="num">
                            {{topData.todayGoodsNum}}
                          </div>
                          <div class="text">今日询盘吨数</div>
                        </div>
                        <div class="num-item" style="width:25%">
                          <div class="num">
                            {{topData.todayPriceGoodsNum}}
                          </div>
                          <div class="text">今日报价吨数</div>
                        </div>
                        <div class="num-item" style="width:25%">
                          <div class="num">
                            {{topData.todaySucGoodsNum}}
                          </div>
                          <div class="text">今日成交吨数</div>
                        </div>
                        <div class="num-item" style="width:25%">
                          <div class="num">
                            {{topData.priceM}}
                          </div>
                          <div class="text">平均报价时长</div>
                        </div>
                      </div>
                    </div>

                  </dv-border-box-12>
                </div>
              </el-col>
              <el-col :span="8" style="height:100%;position: relative;z-index: 1">
                <div style="height:calc(25% - 8px)">
                  <dv-border-box-12 :reverse="true">
                    <div class="num-info"  v-if="downData">
                      <div class="num-div" style="height:50%;margin-top:-20px">
                        <div class="num-item">
                          <div class="num">
                            <countTo :startVal='0' :endVal='downData.shipNum' :duration='3000' v-if="downData"></countTo>
                          </div>
                          <div class="text">已发货数量</div>
                        </div>
                        <div class="num-item">
                          <div class="num">
                            <countTo :startVal='0' :endVal='downData.shipGoods' :duration='3000' v-if="downData"></countTo>
                          </div>
                          <div class="text">在途量</div>
                        </div>
                        <div class="num-item">
                          <div class="num">
                            <countTo :startVal='0' :endVal='downData.planShipGoods' :duration='3000' v-if="downData"></countTo>
                          </div>
                          <div class="text">待发量</div>
                        </div>
                      </div>
                      <div class="num-div" style="height:50%">
                        <div class="num-item">
                          <div class="num">
                            <countTo :startVal='0' :endVal='downData.allnum' :duration='3000' v-if="downData"></countTo>
                          </div>
                          <div class="text">今日预计发货总量</div>
                        </div>
                        <div class="num-item" >
                          <div class="num">
                            <countTo :startVal='0' :endVal='downData.sendDay' :duration='3000' v-if="downData"></countTo>
                          </div>
                          <div class="text">今天已发货数量</div>
                        </div>
                        <div class="num-item">
                          <div class="num">
                            <countTo :startVal='0' :endVal='downData.sendPlanDay' :duration='3000' v-if="downData"></countTo>
                          </div>
                          <div class="text">今日待发总量</div>
                        </div>
                      </div>
                    </div>
                  </dv-border-box-12>
                </div>
                <div style="height:25%;margin:8px 0 ">
                  <div style="height:100%;background-color: rgba(6,30,93,.5); padding:0 20px">
                    <div class="title-div">询盘统计</div>
                    <div id="myChart" style="width:100%;height:calc(100% - 30px);margin-top:-30px"></div>
                  </div>
                </div>
                <div style="height:calc(50% - 8px)">
                  <div class="title-div">最新成交记录</div>
                  <dv-scroll-board :config="config" style="width:100%;height:calc(100% - 50px)" />
                </div>
              </el-col>
            </el-row>
          </div>
          <div style="height:calc(30% - 20px);margin-top:20px;background-color: rgba(6, 30, 93, 0.5);">
            <dv-scroll-board :config="config4" style="width:100%;height:100%" />
          </div>

        </div>


      </div>
    </div>
  </div>
</template>

<script>

import { getPurchaseTimeReportAPI } from "@/api/allInLine/report.js";
import { Scene, PolygonLayer, LineLayer, PointLayer } from "@antv/l7";
import { Mapbox, GaodeMap } from "@antv/l7-maps";
import countTo from 'vue-count-to';
import { formatDate } from "@/utils/date";
import {bigScreenTop,bigScreenLeft,bigScreenRight,bigScreenDown} from '@/api/allInLine/company'
export default {
  name: "bigScreen",
  data() {
    return {
      topData:null,
      config:{
        header: ['时间', '公司名称', '牌号','销量(吨)'],
        data: [],
        columnWidth: [200,200,200,100],
        align: ['center','center','center','center'],
        headerBGC:'#1981f6',
        oddRowBGC:'rgba(10, 29, 50, 0.8)',
        evenRowBGC:'rgba(0, 44, 81, 0.8)',
        rowNum:6
      },
      config2:{
        rowNum:6,
        data: []
      },
      config3:{
        digitalFlopStyle: {
          fontSize: 16,
          fill: '#fff'
        },
        radius: '70%',
        activeRadius: '75%',
        data: []
      },
      leftData:{},
      propKey:'day',
      listKey:'dayList',
      rightData:{},
      downData:null,
      style: {
        width: "1920",
        height: "1080",
        transform: "scaleY(1) scaleX(1) translate(-50%, -50%)"
      },
      config4:{
        header: ['采购员', '询价总次数', '报价次数','平均报价时长','最长回复时长','最短回复时长','15分钟内回复','30分钟内回复','1小时内回复','超过1小时回复','成交次数','成交率'],
        data: [],
        columnWidth: [],
        align: ['center','center','center','center','center','center','center','center','center','center','center','center'],
        headerBGC:'#1981f6',
        oddRowBGC:'rgba(10, 29, 50, 0.8)',
        evenRowBGC:'rgba(0, 44, 81, 0.8)',
        rowNum:5
      },

    };

  },
  components: { countTo },

  computed: {


  },
  created() {
  },
  mounted() {
    this.init()
    setInterval(()=>{
      this.init()
    }, 600000);

    let that = this;
    that.setScale();
    /*窗口改变事件*/
    $(window).resize(()=> {
      that.setScale();
    });
  },

  methods: {
    async init(){
      await this.getData();
      await this.getLeftData();
      await this.getRightData();
      await this.getDownData().then(()=>{
        this.$nextTick(()=>{
          this.setMapl7();
          this.$forceUpdate()
        })
      })
      await this.getPurchaseTimeReport()
    },
    //获取询价统计列表
    getPurchaseTimeReport() {
      let dataList = []
      getPurchaseTimeReportAPI({action:'bigScreen'}).then((res)=>{
        res.list.forEach((el)=>{
          dataList.push([
            el.userRealName,
            el.inquiryCount,
            el.priceCount,
            el.priceMinutes,
            el.maxMinutes,
            el.minMinutes,
            el['15Minutes'],
            el['30Minutes'],
            el.oneHour,
            el.oneHourMore,
            el.orderCount,
            el.orderRate,
          ])
        })
        this.config4 = {
          header: ['采购员', '询价总次数/吨', '报价次数/吨','平均报价时长','最长回复时长','最短回复时长','15分钟内回复','30分钟内回复','1小时内回复','超过1小时回复','成交次数/吨','成交率'],
            data: dataList,
            columnWidth: [],
            align: ['center','center','center','center','center','center','center','center','center','center','center','center'],
            headerBGC:'#1981f6',
            oddRowBGC:'rgba(10, 29, 50, 0.8)',
            evenRowBGC:'rgba(0, 44, 81, 0.8)',
            rowNum:5
        }
      });

    },
    getScale() {
      const w = window.innerWidth / this.style.width;
      const h = window.innerHeight / this.style.height;
      return {x:w,y:h};
    },
    setScale() {
      let scale = this.getScale();
      this.style.transform = "scaleY(" + scale.y + ") scaleX(" + scale.x + ") translate(-50%, -50%)";
    },
    getDownData(){
      this.downData = null
      return  bigScreenDown().then((res)=>{
        this.downData = res;
      })
    },
    getRightData(){
      let dataList = []
      return bigScreenRight().then((res)=>{
          this.rightData = res
          res.dataList.forEach((el)=>{
            dataList.push([el.createTime,el.customerName,el.goodsSn,el.num])
          })
          this.config = {
            header: ['时间', '公司名称', '牌号', '销量(吨)'],
            data: dataList,
            columnWidth: [200, 200, 200, 100],
            align: ['center', 'center', 'center', 'center'],
            headerBGC: '#1981f6',
            oddRowBGC: 'rgba(10, 29, 50, 0.8)',
            evenRowBGC: 'rgba(0, 44, 81, 0.8)',
            rowNum: 6
          }
          setTimeout(()=>{
            this.draw(res.xList,res.yList,res.zList)
          },3)
      })
    },
    getData(){
      this.topData  = null
     return  bigScreenTop().then((res)=>{
        this.topData = res
      })
    },
    changePopKey(key){
      this.propKey = key;
      this.config3.data = [];
      this.$nextTick(()=>{
        this.setLeftProp()
      })
    },
    setLeftProp(){
      this.config3.data = [];
      for(let key in this.leftData[this.propKey]){
        if(this.leftData[this.propKey][key]['num'] > 0){
          this.config3.data.push({
            name:key == 'other' ? '其它' : key,
            value:this.leftData[this.propKey][key]['num']
          })
        }

      }
    },
    changeListKey(key){
      this.listKey = key
      this.config2.data = []
      this.$nextTick(()=>{
        this.setLeftList()
      })
    },
    getLeftData(){
     return  bigScreenLeft().then((res)=>{
         this.leftData = res;
         this.config2.data = []
         this.$nextTick(()=>{
           this.setLeftList()
         })
        this.config3.data = [];
        this.$nextTick(()=>{
          this.setLeftProp()
        })

      })
    },
    setLeftList(){
        this.config2.data = []
        this.leftData[this.listKey].forEach((el)=>{
          this.config2.data.push({
            name:el.goodsNum+'/'+el.goodsSn,
            value:el.num
          })
        })
    },
     setMapl7(){
       const scene = new Scene({
         id: "map",
         map: new Mapbox({
           pitch: 0,
           style: "blank",
           center: [119.975172,31.811096],
           zoom: 4
         })
       });
       scene.on("loaded", () => {
         fetch(
           // 'https://gw.alipayobjects.com/os/bmw-prod/1981b358-28d8-4a2f-9c74-a857d5925ef1.json' //  获取行政区划P噢利用
           "https://gw.alipayobjects.com/os/bmw-prod/d6da7ac1-8b4f-4a55-93ea-e81aa08f0cf3.json"
         ).then(res => res.json())
           .then(data => {
             const chinaPolygonLayer = new PolygonLayer({
               autoFit: true,
               zIndex:0
             }).source(data);

             chinaPolygonLayer
               .color("name", [
                 "#061e5d",
                 "#061e5d",
                 "#061e5d",
                 "#061e5d",
               ])
               .shape("fill")
               .active({ color: '#1981f6', mix: 0})
               .style({
                 opacity: 0.6
               });
             //  图层边界
             const layer2 = new LineLayer({
               autoFit: true
             })
               .source(data)
               .color("#1370fb")
               .size(0.8)
               .style({
                 opacity: 0.9
               });

             scene.addLayer(chinaPolygonLayer);
             scene.addLayer(layer2);
           });
         fetch(
           "https://gw.alipayobjects.com/os/bmw-prod/c4a6aa9d-8923-4193-a695-455fd8f6638c.json" //  标注数据
         )
           .then(res => res.json())
           .then(data => {
             const labelLayer = new PointLayer({
               zIndex: 5
             })
               .source(data, {
                 parser: {
                   type: "json",
                   coordinates: "center"
                 }
               })
               .color("#fff")
               .shape("name", "text")
               .size(12)
               .style({
                 opacity: 1,
                 stroke: "#fff",
                 strokeWidth: 0,
                 padding: [5, 5],
                 textAllowOverlap: false
               });

             scene.addLayer(labelLayer);
           });



             const linelayer = new LineLayer({zIndex:1})
               .source(this.downData.list, {
                 parser: {
                   type: 'json',
                   x: 'lng1',
                   y: 'lat1',
                   x1: 'lng2',
                   y1: 'lat2'
                 }
               })
               .size(2)
               .shape('line')
               .texture('arrow')
               .color('#76640d')
               .animate({
                 interval: 1, // 间隔
                 duration: 1, // 持续时间，延时
                 trailLength: 2 // 流线长度
               })
               .style({
                 opacity: 0.8,
                 lineTexture: true, // 开启线的贴图功能
                 iconStep: 10, // 设置贴图纹理的间距
                 borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
                 borderColor: '#fff' // 默认为 #ccc
               });
         const data3 = [];
         this.downData.list.forEach((el)=>{
           data3.push({'lng':el.lng1,'lat':el.lat1},{'lng':el.lng2,'lat':el.lat2})
         })
         const pointLayer = new PointLayer({zIndex:1})
           .source(data3,{
             parser: {
               type: 'json',
               x: 'lng',
               y: 'lat',
             }
           })
           .shape('circle')
           .animate(true)
           .size(30)
           .color('#ffd400')
           .style({
               opacity: 0.8,
               strokeWidth: 1
             });
             scene.addImage('arrow', 'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg');
             scene.addLayer(linelayer);
             scene.addLayer(pointLayer);

       });
     },

    draw(x,y1,y2) {
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ['日询盘量','日成交量'],
          x:'right',
          top:'0',
          textStyle: {
            fontSize: 10,//字体大小
            color: '#ffffff'//字体颜色
          }
        },
        grid: {
          show: false,
          top: '30px',    // 一下数值可为百分比也可为具体像素值
          right: '20px',
          bottom: '20px',
          left: '20px'
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: x,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ccc',
              fontSize:7
            }
          },
          axisTick:{
            show:false // 不显示坐标轴刻度线
          },
          axisLine: {
            show:true,//是否显示轴线
            lineStyle: {
              color: 'rgba(255,255,255,0)',//刻度线的颜色
            }
          }
        },

        yAxis:
          {
            type: "value",
            splitLine:{
              show:false // 不显示网格线
            },
            axisTick:{
              show:false // 不显示坐标轴刻度线
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ccc',
                fontSize:7
              }
            },
            axisLine: {
              show:true,//是否显示轴线
              lineStyle: {
                color: 'rgba(255,255,255,0)',//刻度线的颜色
              }
            }
          },

        series: [
          {
            name: "日询盘量",
            type: "line",
            data: y1,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,  color: 'rgba(61,213,176,1)'  // 100% 处的颜色
                }, {
                  offset: 1, color: 'rgba(61,213,176,0.1)' //   0% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            color: '#3DD5B0', //线条颜色
            smooth: true //线条平滑
          },
          {
            name: "日成交量",
            type: "line",
            data: y2,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,  color: 'rgba(0,198,247,1)'  // 100% 处的颜色
                }, {
                  offset: 1, color: 'rgba(0,198,247,0.1)' //   0% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            color: '#00C6F7', //线条颜色
            smooth: true  //线条平滑
          },

        ],

      });
    },

  },
};
</script>

<style  lang="scss">
#screen{
  z-index: 100;
  transform-origin: 0 0;
  position: fixed;
  left: 50%;
  top: 50%;
  transition: 0.3s;
}
  .bigScreen-div{
    width: 100%;
    height: 100%;
    background: url("https://pic.moresu.com/FiFdSq8Eb_Nx2dXG9AQkZI8H_7_h") no-repeat center center #030409;
    color: #fff;
    .big-title{
      font-size:50px;
      font-weight: bold;
      height:80px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .big-info{
      padding:16px;
      padding-top:0;
      width:100%;
      height:calc(100% - 80px);
      .title-div{
        font-weight: 700;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
      }
      .hxtb-div{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height:calc(100% - 50px);
        .charts-div{
          width:180px;
          height:180px;
        }
        .table-div{
          flex:1;
          font-size:14px;
          height:100%;
          .table{
            width:100%;
            height:100%;
            td,th{
              height:20%;
              border-bottom:1px solid #409eff;
            }
          }
        }
      }
      .num-info{
        width:100%;
         padding:16px;
        display: flex;
        justify-content:center;
        align-items: center;
        height:100%;
        flex-wrap: wrap ;
        .num-div{
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap ;
          width:100%;
          .num-item{
            width:30%;
            color:#fff;
            text-align: center;
            height:45%;
            .num{
              font-size:30px;
              font-weight: bold;
            }
            .text{
              margin-top:5px;
              font-size:14px;
              color:#b3b3b3
            }
          }
        }
      }


    }
  }
</style>
